import { Button, Layout, Avatar, Divider, Badge, Drawer, message, Dropdown, Menu,Empty } from "antd";
import React, { useContext, useEffect, useState } from "react";
import "./header.less";
import { MailOutlined, BankOutlined, ArrowRightOutlined } from "@ant-design/icons";
import { LoginStateContext } from "../../router";
import { getUserInformation, getMessagesList } from "../vo/request";
import { userInformData, messageData } from "../vo/vo";
import { Link } from 'react-router-dom';
import { Invitied } from './messages';

const { Header } = Layout;

export function AppHeader() {
    const [messageVisible, setVisible] = useState(false);
    const [messages, setMessages] = useState([] as messageData[]);
    const loginState = useContext(LoginStateContext);
    const token = sessionStorage.getItem("token");
    const [user, setUser] = useState({} as userInformData);
    useEffect(() => {
        (async () => {
            if (token) {
                try {
                    let msgRes = await getMessagesList();
                    if(!msgRes.code) {
                        console.log(msgRes.data);
                        setMessages(msgRes.data);
                    }
                    let res = await getUserInformation();
                    if (!res.code) {
                        console.log(res.data)
                        setUser(res.data);
                        loginState.setUserData(res.data)
                        loginState.setState(true);
                    }
                } catch (err) {
                    message.error(err);
                }
            }
        })()
    }, [token]);


    const onClose = () => {
        setVisible(false);
    }
    const onOpen = () => {
        setVisible(true);
    }

    const menu = (
        <Menu>
            <Menu.Item key="userspace" icon={<BankOutlined />}><Link to="/index/userspace">个人空间</Link></Menu.Item>
            <Menu.Item key="logout" icon={<ArrowRightOutlined />}>登出</Menu.Item>
        </Menu>
    )

    return (
        <Header className="page_header" style={{ background: "#fff" }}>
            <div className="logo" style={{ color: "#000" }}>logo</div>
            {loginState.state ? <div>
                <Badge count={messages.length} size="small" style={{ marginRight: 5 }}>
                    <Button onClick={onOpen} type="link" size="small" style={{ color: "#000" }}>
                        <MailOutlined style={{ fontSize: 16 }} />
                    </Button>
                </Badge>
                <Drawer
                    title="我的消息"
                    placement="right"
                    closable={false}
                    onClose={onClose}
                    visible={messageVisible}
                    width={400}
                    bodyStyle={{padding: 0}}
                >
                    {setMessagesEle(messages, setMessages)}
                </Drawer>
                <Divider type="vertical"></Divider>
                <Dropdown overlay={menu}>
                    <Avatar
                        src={user.portrait}
                        style={{ backgroundColor: "#ffbf00", verticalAlign: 'middle' }}
                        size="large"
                        gap={4}
                    >
                        {"潘重阳"}
                    </Avatar>
                </Dropdown>
            </div> : ""}

        </Header>
    )
}

function setMessagesEle(messages: messageData[], setMessages: React.Dispatch<React.SetStateAction<messageData[]>>) {
    if(messages.length) {
        return messages.map((value, index) => {
            return <Invitied data={value} index={index} key={value.messageId} setMessages={setMessages} new/>
        });
    } else {
        return <Empty />
    }
}